<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-6 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>在线巡查</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>巡查功能</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">巡查任务详情</span>
                </div>
                <!-- 页面标题和操作按钮 -->
                <div class="flex justify-between items-center mb-6">
                    <div class="flex items-center">
                        <a href="/patrol"
                            data-readdy="true"
                            class="mr-4 bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-sm hover:bg-gray-100 cursor-pointer">
                            <i class="fas fa-arrow-left text-gray-600"></i>
                        </a>
                        <h1 class="text-2xl font-bold text-gray-800">巡查任务详情</h1>
                        <span
                            class="ml-4 px-3 py-1 bg-yellow-100 text-yellow-800 text-sm font-medium rounded-full">进行中</span>
                    </div>
                    <div class="flex space-x-3">
                        <div class="relative group">
                            <button
                                @click="shareTask"
                                class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded flex items-center shadow-sm hover:bg-gray-50 !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200">
                                <i class="fas fa-share-alt mr-2"></i> 分享
                            </button>
                            <!-- Tooltip提示 -->
                            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                                点击分享任务链接给其他人
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
                            </div>
                        </div>
                        <button
                            @click="printTask"
                            class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded flex items-center shadow-sm hover:bg-gray-50 !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-print mr-2"></i> 打印
                        </button>
                        <button
                            @click="exportReport"
                            class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded flex items-center shadow-sm hover:bg-gray-50 !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-file-export mr-2"></i> 导出报告
                        </button>
                        <!-- 非编辑模式：显示编辑按钮 -->
                        <button
                            v-if="!isEditMode"
                            @click="editTask"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center shadow-sm hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-edit mr-2"></i> 编辑任务
                        </button>

                        <!-- 编辑模式：显示保存和取消按钮 -->
                        <div v-else class="flex space-x-2">
                            <button
                                @click="saveTask"
                                class="px-4 py-2 bg-green-600 text-white rounded flex items-center shadow-sm hover:bg-green-700 !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-save mr-2"></i> 保存
                            </button>
                            <button
                                @click="cancelEdit"
                                class="px-4 py-2 bg-gray-600 text-white rounded flex items-center shadow-sm hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-times mr-2"></i> 取消
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 任务基本信息卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                            任务基本信息
                        </h2>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-clock mr-2"></i>
                            <span>更新于: 2025-07-08 10:30</span>
                        </div>
                    </div>
                    <!-- 非编辑模式 -->
                    <div v-if="!isEditMode" class="grid grid-cols-4 gap-y-4">
                        <div class="col-span-2 flex">
                            <div class="w-24 text-gray-500">任务名称:</div>
                            <div class="font-medium text-gray-800">{{ editForm.taskName }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">任务编号:</div>
                            <div class="font-medium text-gray-800">XC-2025-0706-004</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">任务类型:</div>
                            <div class="font-medium text-gray-800">{{ editForm.taskType }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">负责人:</div>
                            <div class="font-medium text-gray-800">{{ editForm.responsible }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">参与人员:</div>
                            <div class="font-medium text-gray-800">{{ editForm.participants }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">创建时间:</div>
                            <div class="font-medium text-gray-800">2025-07-06 08:30</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">计划时间:</div>
                            <div class="font-medium text-gray-800">{{ editForm.plannedStartTime }} - {{ editForm.plannedEndTime }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-24 text-gray-500">任务状态:</div>
                            <div>
                                <span
                                    :class="{
                                        'bg-yellow-100 text-yellow-800': editForm.status === '进行中',
                                        'bg-green-100 text-green-800': editForm.status === '已完成',
                                        'bg-blue-100 text-blue-800': editForm.status === '待执行',
                                        'bg-red-100 text-red-800': editForm.status === '已暂停'
                                    }"
                                    class="px-2 py-1 text-xs font-medium rounded-full">{{ editForm.status }}</span>
                            </div>
                        </div>
                        <div class="col-span-4 flex mt-2">
                            <div class="w-24 text-gray-500">任务描述:</div>
                            <div class="font-medium text-gray-800">{{ editForm.description }}</div>
                        </div>
                    </div>

                    <!-- 编辑模式 -->
                    <div v-else class="grid grid-cols-4 gap-y-4">
                        <div class="col-span-2 flex items-center">
                            <div class="w-24 text-gray-500">任务名称:</div>
                            <input 
                                v-model="editForm.taskName"
                                type="text"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                placeholder="请输入任务名称"
                            />
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">任务编号:</div>
                            <div class="font-medium text-gray-500">XC-2025-0706-004 (不可编辑)</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">任务类型:</div>
                            <select 
                                v-model="editForm.taskType"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            >
                                <option v-for="type in taskTypes" :key="type" :value="type">{{ type }}</option>
                            </select>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">负责人:</div>
                            <select 
                                v-model="editForm.responsible"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            >
                                <option v-for="user in availableUsers" :key="user" :value="user">{{ user }}</option>
                            </select>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">参与人员:</div>
                            <input 
                                v-model="editForm.participants"
                                type="text"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                placeholder="请输入参与人员，用逗号分隔"
                            />
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">创建时间:</div>
                            <div class="font-medium text-gray-500">2025-07-06 08:30 (不可编辑)</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">开始时间:</div>
                            <input 
                                v-model="editForm.plannedStartTime"
                                type="datetime-local"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            />
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">结束时间:</div>
                            <input 
                                v-model="editForm.plannedEndTime"
                                type="datetime-local"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            />
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-gray-500">任务状态:</div>
                            <select 
                                v-model="editForm.status"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            >
                                <option v-for="status in taskStatuses" :key="status" :value="status">{{ status }}</option>
                            </select>
                        </div>
                        <div class="col-span-4 flex mt-2">
                            <div class="w-24 text-gray-500">任务描述:</div>
                            <textarea 
                                v-model="editForm.description"
                                rows="3"
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                                placeholder="请输入任务描述"
                            ></textarea>
                        </div>
                    </div>
                </div>
                <!-- 巡查企业信息卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-building text-blue-600 mr-2"></i>
                            巡查企业信息
                        </h2>
                        <button
                            @click="showHistoryRecords"
                            class="text-blue-600 text-sm flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:text-blue-800 transition-colors">
                            <i class="fas fa-history mr-1"></i> 查看历史巡查记录
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div class="flex">
                                <div class="w-24 text-gray-500">企业名称:</div>
                                <div class="font-medium text-gray-800">{{ companyName }}</div>
                            </div>
                            <div class="flex">
                                <div class="w-24 text-gray-500">统一社会信用代码:</div>
                                <div class="font-medium text-gray-800">{{ companyCreditCode }}</div>
                            </div>
                            <div class="flex">
                                <div class="w-24 text-gray-500">企业地址:</div>
                                <div class="font-medium text-gray-800">{{ companyAddress }}</div>
                            </div>
                            <div class="flex">
                                <div class="w-24 text-gray-500">联系人:</div>
                                <div class="font-medium text-gray-800">{{ companyContact }}</div>
                            </div>
                            <div class="flex">
                                <div class="w-24 text-gray-500">联系电话:</div>
                                <div class="font-medium text-gray-800">027-86123456</div>
                            </div>
                            <div class="flex">
                                <div class="w-24 text-gray-500">企业规模:</div>
                                <div class="font-medium text-gray-800">特大型（员工10000人以上）</div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">历史巡查概况</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">累计巡查次数</span>
                                    <span class="font-medium text-gray-900">12 次</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">上次巡查时间</span>
                                    <span class="font-medium text-gray-900">2025-06-29</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">上次巡查结果</span>
                                    <span
                                        class="px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full">不合格</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">发现问题数</span>
                                    <span class="font-medium text-gray-900">8 项</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">已整改问题</span>
                                    <span class="font-medium text-gray-900">5 项</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">整改率</span>
                                    <div class="w-32 bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 62.5%"></div>
                                    </div>
                                    <span class="font-medium text-gray-900">62.5%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查内容与要求卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-clipboard-list text-blue-600 mr-2"></i>
                            巡查内容与要求
                        </h2>
                        <button
                            @click="showInspectionStandards"
                            class="text-blue-600 text-sm flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:text-blue-800 transition-colors">
                            <i class="fas fa-file-pdf mr-1"></i> 查看巡查标准
                        </button>
                    </div>
                    <div class="mb-4">
                        <h3 class="font-semibold text-base text-gray-700 mb-2">巡查重点项目</h3>
                        <div class="grid grid-cols-3 gap-4">
                            <div v-for="(item, index) in inspectionItems" :key="index"
                                class="bg-gray-50 rounded-lg p-4 flex items-start">
                                <div
                                    class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3 flex-shrink-0">
                                    <i :class="item.icon"></i>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-800 mb-1">{{ item.name }}</div>
                                    <div class="text-sm text-gray-600">{{ item.description }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <h3 class="font-semibold text-base text-gray-700 mb-2">巡查要求说明</h3>
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 text-blue-700 mb-4">
                            <p class="mb-2">本次巡查为上次巡查问题整改复查，重点检查上次发现的 8 项安全隐患整改情况，包括：</p>
                            <ol class="list-decimal pl-5 space-y-1">
                                <li>高炉煤气系统安全隐患整改情况</li>
                                <li>电气设备绝缘性能不达标整改情况</li>
                                <li>特种设备安全附件缺失整改情况</li>
                                <li>消防设施不完善整改情况</li>
                                <li>安全通道堵塞整改情况</li>
                                <li>危险化学品储存不规范整改情况</li>
                                <li>安全警示标识不完善整改情况</li>
                                <li>员工安全培训不到位整改情况</li>
                            </ol>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold text-base text-gray-700 mb-2">相关规范及标准</h3>
                        <div class="space-y-2">
                            <div v-for="(standard, index) in standards" :key="index" class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 transition-colors">
                                <div class="flex items-center">
                                    <i class="fas fa-file-alt text-gray-400 mr-2"></i>
                                    <span class="text-blue-600 cursor-pointer" @click="viewStandardDetail(standard)">{{ standard }}</span>
                                </div>
                                <div>
                                    <button @click="viewStandardDetail(standard)" 
                                            class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
                                            title="查看详情">
                                        <i class="fas fa-eye mr-1"></i>详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查进度卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-tasks text-blue-600 mr-2"></i>
                            巡查进度
                        </h2>
                        <div class="flex items-center">
                            <span class="text-gray-500 mr-2">当前进度：</span>
                            <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
                                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 40%"></div>
                            </div>
                            <span class="font-medium text-blue-600">40%</span>
                        </div>
                    </div>
                    <div class="relative pb-12">
                        <!-- 进度时间轴 -->
                        <div class="absolute top-0 left-6 bottom-0 w-0.5 bg-gray-200"></div>
                        <div v-for="(step, index) in progressSteps" :key="index" class="relative flex items-start mb-8">
                            <div class="absolute top-0 left-6 w-0.5 h-full bg-gray-200"></div>
                            <div class="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 z-10"
                                :class="getProgressStepClass(step.status)">
                                <i :class="step.icon + ' text-lg'"></i>
                            </div>
                            <div class="ml-6">
                                <div class="flex items-center">
                                    <h3 class="font-semibold text-base text-gray-800">{{ step.title }}</h3>
                                    <span class="ml-3 px-2 py-0.5 text-xs rounded-full"
                                        :class="getProgressStatusClass(step.status)">{{ step.statusText }}</span>
                                </div>
                                <div class="text-sm text-gray-600 mt-1">{{ step.time }}</div>
                                <div class="mt-2 text-gray-700">{{ step.description }}</div>
                                <div v-if="step.actions && step.actions.length > 0" class="mt-3 flex space-x-3">
                                    <button v-for="(action, actionIndex) in step.actions" :key="actionIndex"
                                        class="px-3 py-1 text-sm rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                        :class="action.class">
                                        <i :class="action.icon + ' mr-1'"></i> {{ action.text }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 问题与整改卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-exclamation-triangle text-blue-600 mr-2"></i>
                            问题与整改
                        </h2>
                        <button @click="showAddIssueModal = true"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center shadow-sm hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-plus mr-2"></i> 添加问题
                        </button>
                    </div>
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <button v-for="(tab, index) in issueTabs" :key="index"
                                    class="px-3 py-1.5 text-sm rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="tab.active ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
                                    @click="setActiveIssueTab(index)">
                                    {{ tab.name }} ({{ tab.count }})
                                </button>
                            </div>
                            <div class="relative">
                                <input type="text" placeholder="搜索问题" v-model="issueSearchQuery"
                                    class="w-64 bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i
                                    class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        问题描述</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        问题类型</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        严重程度</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        发现时间</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        整改截止时间</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        整改状态</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(issue, index) in filteredIssues" :key="index" class="hover:bg-gray-50">
                                    <td class="px-4 py-3">
                                        <div class="text-sm font-medium text-gray-900">{{ issue.description }}</div>
                                        <div class="text-xs text-gray-500">{{ issue.location }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ issue.type }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="getSeverityClass(issue.severity)">
                                            {{ issue.severity }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ issue.foundDate }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ issue.deadline }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="getStatusClass(issue.status)">
                                            {{ issue.status }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="openIssueDetail(issue)"
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                            <button
                                                v-if="issue.statusType === 'pending' || issue.statusType === 'inProgress'"
                                                @click="openRectifyModal(issue)"
                                                class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">整改</button>
                                            <button v-if="issue.statusType === 'completed'" @click="openIssueView(issue)"
                                                class="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap cursor-pointer">查看</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4">
                        <h3 class="font-semibold text-base text-gray-700 mb-3">整改进度统计</h3>
                        <div class="grid grid-cols-4 gap-4">
                            <div class="bg-gray-50 rounded-lg p-4">
                                <div class="text-sm text-gray-500 mb-1">总问题数</div>
                                <div class="text-2xl font-bold text-gray-900">{{ issueStats.total }}</div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-xs text-gray-500">{{ issueStats.totalPercent }}%</span>
                                    <div class="w-16 h-1.5 bg-gray-300 rounded-full">
                                        <div class="bg-blue-600 h-1.5 rounded-full" :style="{ width: issueStats.totalPercent + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <div class="text-sm text-gray-500 mb-1">已整改</div>
                                <div class="text-2xl font-bold text-green-600">{{ issueStats.completed }}</div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-xs text-gray-500">{{ issueStats.completedPercent }}%</span>
                                    <div class="w-16 h-1.5 bg-gray-300 rounded-full">
                                        <div class="bg-green-500 h-1.5 rounded-full" :style="{ width: issueStats.completedPercent + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <div class="text-sm text-gray-500 mb-1">整改中</div>
                                <div class="text-2xl font-bold text-yellow-600">{{ issueStats.inProgress }}</div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-xs text-gray-500">{{ issueStats.inProgressPercent }}%</span>
                                    <div class="w-16 h-1.5 bg-gray-300 rounded-full">
                                        <div class="bg-yellow-500 h-1.5 rounded-full" :style="{ width: issueStats.inProgressPercent + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <div class="text-sm text-gray-500 mb-1">未整改</div>
                                <div class="text-2xl font-bold text-red-600">{{ issueStats.pending }}</div>
                                <div class="mt-2 flex items-center justify-between">
                                    <span class="text-xs text-gray-500">{{ issueStats.pendingPercent }}%</span>
                                    <div class="w-16 h-1.5 bg-gray-300 rounded-full">
                                        <div class="bg-red-500 h-1.5 rounded-full" :style="{ width: issueStats.pendingPercent + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 附件资料卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800 flex items-center">
                            <i class="fas fa-paperclip text-blue-600 mr-2"></i>
                            附件资料
                        </h2>
                        <button @click="triggerAttachmentUpload"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center shadow-sm hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-upload mr-2"></i> 上传附件
                        </button>
                        <!-- 隐藏的文件选择输入 -->
                        <input ref="attachmentInput" type="file" multiple
                               accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                               class="hidden" @change="handleAttachmentChange" />
                    </div>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h3 class="font-semibold text-base text-gray-700 mb-3">文档资料</h3>
                            <div class="space-y-3">
                                <div v-for="(doc, index) in documents" :key="index"
                                    class="flex items-center p-3 bg-gray-50 rounded-lg">
                                    <div
                                        class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                        <i :class="getFileIcon(doc.type)"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-800">{{ doc.name }}</div>
                                        <div class="flex items-center text-xs text-gray-500 mt-1">
                                            <span>{{ doc.size }}</span>
                                            <span class="mx-2">|</span>
                                            <span>{{ doc.uploadTime }}</span>
                                            <span class="mx-2">|</span>
                                            <span>上传人: {{ doc.uploader }}</span>
                                        </div>
                                    </div>
                                    <div class="flex space-x-2">
                                        <button
                                            class="text-blue-600 !rounded-button whitespace-nowrap cursor-pointer">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button
                                            class="text-green-600 !rounded-button whitespace-nowrap cursor-pointer">
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base text-gray-700 mb-3">多媒体资料</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <div v-for="(media, index) in mediaFiles" :key="index"
                                    class="relative rounded-lg overflow-hidden">
                                    <img :src="media.thumbnail" :alt="media.name"
                                        class="w-full h-32 object-cover object-top">
                                    <div
                                        class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white text-xs p-2">
                                        {{ media.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部操作栏 -->
                <div
                    class="fixed bottom-0 left-64 right-0 bg-white border-t border-gray-200 px-6 py-3 flex justify-between items-center">
                    <div class="flex items-center text-gray-500">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span>任务创建于 2025-07-06 08:30，预计完成时间 2025-07-08 16:30</span>
                    </div>
                    <div class="flex space-x-3">
                        <button @click="handleBottomSave"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-save mr-2"></i> 保存
                        </button>
                        <button @click="continueExecution"
                            class="px-4 py-2 bg-yellow-500 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-clipboard-check mr-2"></i> 继续执行
                        </button>
                        <button @click="submitPatrolResults"
                            class="px-4 py-2 bg-green-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-check-circle mr-2"></i> 提交巡查结果
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 继续执行确认弹窗 -->
        <div v-if="showContinueModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-[460px] overflow-hidden">
                <div class="flex justify-between items-center p-5 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800">继续执行确认</h3>
                    <button @click="cancelContinue" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-5">
                    <p class="text-gray-700">是否继续执行该巡查任务？</p>
                </div>
                <div class="flex justify-end space-x-3 p-5 border-t border-gray-200">
                    <button @click="cancelContinue" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">取消</button>
                    <button @click="confirmContinue" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">确认继续</button>
                </div>
            </div>
        </div>

        <!-- 提交巡查结果确认弹窗 -->
        <div v-if="showSubmitModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-[520px] overflow-hidden">
                <div class="flex justify-between items-center p-5 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800">提交巡查结果确认</h3>
                    <button @click="cancelSubmit" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-5">
                    <p class="text-gray-700">确定要提交巡查结果吗？提交后任务将标记为已完成。</p>
                </div>
                <div class="flex justify-end space-x-3 p-5 border-t border-gray-200">
                    <button @click="cancelSubmit" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">取消</button>
                    <button @click="confirmSubmit" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">确认提交</button>
                </div>
            </div>
        </div>

        <!-- 历史巡查记录弹窗 -->
        <div v-if="showHistoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-[900px] max-h-[80vh] overflow-hidden">
                <!-- 弹窗头部 -->
                <div class="flex justify-between items-center p-6 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-800">历史巡查记录</h3>
                    <button @click="closeHistoryModal" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 弹窗内容 -->
                <div class="p-6 overflow-y-auto max-h-[60vh]">
                    <div class="space-y-4">
                        <div v-for="(record, index) in historyRecords" :key="index" 
                             class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex items-center space-x-4">
                                    <h4 class="font-semibold text-gray-800">{{ record.id }}</h4>
                                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">{{ record.type }}</span>
                                    <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">{{ record.status }}</span>
                                </div>
                                <span class="text-sm text-gray-500">{{ record.date }}</span>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 mb-3">
                                <div>
                                    <span class="text-sm text-gray-600">巡查人员：</span>
                                    <span class="text-sm font-medium">{{ record.inspector }}</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">发现问题：</span>
                                    <span class="text-sm font-medium text-red-600">{{ record.issuesFound }}处</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">已整改：</span>
                                    <span class="text-sm font-medium text-green-600">{{ record.issuesResolved }}处</span>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">整改率：</span>
                                    <span class="text-sm font-medium">{{ Math.round((record.issuesResolved / record.issuesFound) * 100) }}%</span>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <span class="text-sm text-gray-600">巡查总结：</span>
                                <p class="text-sm text-gray-800 mt-1">{{ record.summary }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 弹窗底部 -->
                <div class="flex justify-end p-6 border-t border-gray-200">
                    <button @click="closeHistoryModal" 
                            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 巡查标准弹窗 -->
    <div v-if="showStandardsModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-[9999]" @click.self="closeStandardsModal">
        <!-- 关闭提示 -->
        <div class="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-50 px-3 py-1 rounded-full">
            点击外部区域或按ESC键关闭
        </div>
        <div class="bg-white rounded-lg shadow-2xl max-w-5xl w-full mx-4 max-h-[95vh] min-h-[80vh] transform transition-all duration-300 ease-in-out relative">
            <div class="flex flex-col h-full max-h-[95vh]">
                <!-- 弹窗头部 -->
                <div class="flex justify-between items-center p-6 border-b border-gray-200 bg-white flex-shrink-0">
                    <h3 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-clipboard-list mr-2 text-blue-600"></i>
                        巡查标准
                    </h3>
                    <button @click="closeStandardsModal" 
                            class="text-gray-500 hover:text-gray-700 hover:bg-red-50 transition-all duration-200 p-2 rounded-full border border-gray-300 hover:border-red-300 shadow-sm hover:shadow-md"
                            title="关闭弹窗">
                        <i class="fas fa-times text-lg"></i>
                    </button>
                </div>
                
                <!-- 弹窗内容 -->
                <div class="flex-1 overflow-y-auto p-6 custom-scrollbar" style="scroll-behavior: smooth; min-height: 0; max-height: calc(95vh - 140px);">
                    <div class="space-y-6 pb-4">
                        <div v-for="(category, index) in inspectionStandards" :key="index" 
                             class="bg-gray-50 rounded-lg p-4">
                            <!-- 分类标题 -->
                            <div class="flex items-center mb-4">
                                <i :class="category.icon" class="text-2xl text-blue-600 mr-3"></i>
                                <h4 class="text-lg font-semibold text-gray-900">{{ category.category }}</h4>
                            </div>
                            
                            <!-- 检查项目 -->
                            <div class="space-y-4">
                                <div v-for="(item, itemIndex) in category.items" :key="itemIndex" 
                                     class="bg-white rounded-lg p-4 border border-gray-200">
                                    <div class="flex justify-between items-start mb-3">
                                        <div class="flex-1">
                                            <h5 class="text-md font-medium text-gray-900 mb-1">{{ item.title }}</h5>
                                            <p class="text-sm text-gray-600">{{ item.description }}</p>
                                        </div>
                                        <div class="ml-4 text-right">
                                            <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mb-1">
                                                {{ item.frequency }}
                                            </span>
                                            <br>
                                            <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
                                                {{ item.standard }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- 检查要求 -->
                                    <div class="mt-3">
                                        <h6 class="text-sm font-medium text-gray-700 mb-2">检查要求：</h6>
                                        <ul class="space-y-1">
                                            <li v-for="(requirement, reqIndex) in item.requirements" :key="reqIndex" 
                                                class="text-sm text-gray-600 flex items-start">
                                                <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5 text-xs"></i>
                                                <span>{{ requirement }}</span>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 弹窗底部 -->
                <div class="flex justify-end p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0">
                    <button @click="closeStandardsModal" 
                            class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200 shadow-md hover:shadow-lg font-medium">
                        <i class="fas fa-times mr-2"></i>
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加问题弹窗 -->
    <div v-if="showAddIssueModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-[9999]" @click.self="closeAddIssueModal">
        <div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] transform transition-all duration-300 ease-in-out">
            <div class="flex flex-col h-full max-h-[90vh]">
                <!-- 弹窗头部 -->
                <div class="flex justify-between items-center p-6 border-b border-gray-200 bg-white flex-shrink-0">
                    <h3 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-plus mr-2 text-blue-600"></i>
                        添加问题
                    </h3>
                    <button @click="closeAddIssueModal" 
                            class="text-gray-500 hover:text-gray-700 hover:bg-red-50 transition-all duration-200 p-2 rounded-full border border-gray-300 hover:border-red-300 shadow-sm hover:shadow-md"
                            title="关闭弹窗">
                        <i class="fas fa-times text-lg"></i>
                    </button>
                </div>
                
                <!-- 弹窗内容 -->
                <div class="flex-1 overflow-y-auto p-6" style="min-height: 0;">
                    <form @submit.prevent="submitAddIssue" class="space-y-6">
                        <!-- 问题标题 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                问题标题 <span class="text-red-500">*</span>
                            </label>
                            <input 
                                v-model="newIssue.title"
                                type="text" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请输入问题标题"
                                required>
                        </div>

                        <!-- 问题描述 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                问题描述 <span class="text-red-500">*</span>
                            </label>
                            <textarea 
                                v-model="newIssue.description"
                                rows="4"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请详细描述发现的问题"
                                required></textarea>
                        </div>

                        <!-- 问题类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                问题类型 <span class="text-red-500">*</span>
                            </label>
                            <select 
                                v-model="newIssue.type"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                required>
                                <option value="">请选择问题类型</option>
                                <option value="设备故障">设备故障</option>
                                <option value="安全隐患">安全隐患</option>
                                <option value="环境问题">环境问题</option>
                                <option value="操作违规">操作违规</option>
                                <option value="维护不当">维护不当</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>

                        <!-- 问题位置 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                问题位置 <span class="text-red-500">*</span>
                            </label>
                            <input 
                                v-model="newIssue.location"
                                type="text" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请输入问题发生的具体位置"
                                required>
                        </div>

                        <!-- 发现时间 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                发现时间 <span class="text-red-500">*</span>
                            </label>
                            <input 
                                v-model="newIssue.discoveryTime"
                                type="datetime-local" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                required>
                        </div>

                        <!-- 严重程度 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                严重程度 <span class="text-red-500">*</span>
                            </label>
                            <select 
                                v-model="newIssue.severity"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                required>
                                <option value="">请选择严重程度</option>
                                <option value="轻微">轻微</option>
                                <option value="中等">中等</option>
                                <option value="严重">严重</option>
                            </select>
                        </div>

                        <!-- 责任人 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                责任人 <span class="text-red-500">*</span>
                            </label>
                            <select 
                                v-model="newIssue.responsible"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                required>
                                <option value="">请选择责任人</option>
                                <option v-for="user in availableUsers" :key="user" :value="user">{{ user }}</option>
                            </select>
                        </div>

                        <!-- 整改期限 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                整改期限 <span class="text-red-500">*</span>
                            </label>
                            <input 
                                v-model="newIssue.deadline"
                                type="date" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                required>
                        </div>
                    </form>
                </div>
                
                <!-- 弹窗底部 -->
                <div class="flex justify-end space-x-3 p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0">
                    <button @click="closeAddIssueModal" 
                            type="button"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200">
                        取消
                    </button>
                    <button @click="submitAddIssue"
                            type="button"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200">
                        <i class="fas fa-plus mr-2"></i>
                        添加问题
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 问题详情弹窗 -->
    <div v-if="showIssueDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg w-[800px] max-w-full">
            <!-- 弹窗头部 -->
            <div class="flex justify-between items-center p-4 border-b border-gray-200">
                <h3 class="font-bold text-lg text-gray-800">
                    {{ detailModalMode === 'view' ? '查看问题' : '问题详情' }}
                </h3>
                <button @click="closeIssueDetailModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 弹窗主体 -->
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="text-gray-500 text-sm">类型</div>
                        <div class="text-gray-900">{{ selectedIssue?.type || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">位置</div>
                        <div class="text-gray-900">{{ selectedIssue?.location || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">严重程度</div>
                        <div class="text-gray-900">{{ selectedIssue?.severity || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">发现时间</div>
                        <div class="text-gray-900">{{ selectedIssue?.discoveryTime || selectedIssue?.discoveredDate || selectedIssue?.foundDate || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">整改期限</div>
                        <div class="text-gray-900">{{ selectedIssue?.deadline || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">状态</div>
                        <div>
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                  :class="getStatusClass(selectedIssue?.status)">
                                {{ selectedIssue?.status || '—' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="text-gray-500 text-sm mb-1">问题描述</div>
                    <div class="text-gray-900 whitespace-pre-line">{{ selectedIssue?.description || '—' }}</div>
                </div>
            </div>

            <!-- 弹窗底部 -->
            <div class="flex justify-end space-x-3 p-4 border-t border-gray-200 bg-gray-50">
                <button @click="closeIssueDetailModal"
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 整改弹窗 -->
    <div v-if="showRectifyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg w-[700px] max-w-full">
            <!-- 弹窗头部 -->
            <div class="flex justify-between items-center p-4 border-b border-gray-200">
                <h3 class="font-bold text-lg text-gray-800">整改操作</h3>
                <button @click="closeRectifyModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 弹窗主体 -->
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="text-gray-500 text-sm">问题类型</div>
                        <div class="text-gray-900">{{ rectifyingIssue?.type || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">严重程度</div>
                        <div class="text-gray-900">{{ rectifyingIssue?.severity || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">位置</div>
                        <div class="text-gray-900">{{ rectifyingIssue?.location || '—' }}</div>
                    </div>
                    <div>
                        <div class="text-gray-500 text-sm">当前状态</div>
                        <div>
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                  :class="getStatusClass(rectifyingIssue?.status)">
                                {{ rectifyingIssue?.status || '—' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="text-gray-500 text-sm mb-1">问题描述</div>
                    <div class="text-gray-900 whitespace-pre-line">{{ rectifyingIssue?.description || '—' }}</div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">备注（可选）</label>
                    <textarea v-model="rectifyRemark" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>

            <!-- 弹窗底部 -->
            <div class="flex justify-end space-x-3 p-4 border-t border-gray-200 bg-gray-50">
                <button @click="markIssueInProgress"
                        class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-all duration-200">
                    标记为整改中
                </button>
                <button @click="markIssueCompleted"
                        class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200">
                    标记为已整改
                </button>
                <button @click="closeRectifyModal"
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200">
                    取消
                </button>
            </div>
        </div>
    </div>
</template>
<script>
import { ElMessageBox, ElMessage } from 'element-plus'
import Header from '../components/Header.vue';
export default {
    components: {
    Header,
  },
    data() {
        return {
             mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: true, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            inspectionItems: [
                {
                    name: '高炉煤气系统',
                    icon: 'fas fa-fire',
                    description: '检查煤气管道、阀门、安全装置的完好性和密封性'
                },
                {
                    name: '电气设备安全',
                    icon: 'fas fa-bolt',
                    description: '检查电气设备绝缘性能、接地保护装置的有效性'
                },
                {
                    name: '特种设备',
                    icon: 'fas fa-cogs',
                    description: '检查压力容器、起重机械等特种设备安全附件的完好性'
                },
                {
                    name: '消防设施',
                    icon: 'fas fa-fire-extinguisher',
                    description: '检查消防设施的配置、完好性和有效性'
                },
                {
                    name: '安全通道',
                    icon: 'fas fa-door-open',
                    description: '检查安全通道、安全出口的畅通情况'
                },
                {
                    name: '危险化学品',
                    icon: 'fas fa-flask',
                    description: '检查危险化学品储存、使用的规范性'
                }
            ],
            standards: [
                '《钢铁企业安全生产规程》(GB 17880-2011)',
                '《工贸企业有限空间作业安全规程》(AQ 3028-2008)',
                '《高炉煤气安全规程》(GB 8978-2006)',
                '《特种设备安全监察条例》',
                '《生产过程危险和有害因素分类与代码》(GB/T 13861-2009)'
            ],
            progressSteps: [
                {
                    title: '任务创建',
                    icon: 'fas fa-plus-circle',
                    time: '2025-07-06 08:30',
                    description: '由系统管理员创建了本次巡查任务，并指派刘工为负责人',
                    status: 'completed',
                    statusText: '已完成'
                },
                {
                    title: '任务分配',
                    icon: 'fas fa-user-check',
                    time: '2025-07-06 10:15',
                    description: '刘工确认接收任务，并分配王工、赵工、张工协助执行',
                    status: 'completed',
                    statusText: '已完成'
                },
                {
                    title: '准备工作',
                    icon: 'fas fa-clipboard',
                    time: '2025-07-07 14:30',
                    description: '完成巡查方案制定，准备巡查工具和资料，并与企业联系确认巡查时间',
                    status: 'completed',
                    statusText: '已完成'
                },
                {
                    title: '现场巡查',
                    icon: 'fas fa-search',
                    time: '2025-07-08 09:30 - 16:30',
                    description: '正在进行现场巡查，已完成高炉煤气系统、电气设备安全检查，正在进行特种设备检查',
                    status: 'inProgress',
                    statusText: '进行中',
                    
                },
                {
                    title: '问题整理',
                    icon: 'fas fa-list-alt',
                    time: '预计 2025-07-08 16:30 - 17:30',
                    description: '整理巡查发现的问题，分析整改情况',
                    status: 'pending',
                    statusText: '待处理'
                },
                {
                    title: '编制报告',
                    icon: 'fas fa-file-alt',
                    time: '预计 2025-07-09 09:00 - 12:00',
                    description: '编制巡查报告，提出整改建议',
                    status: 'pending',
                    statusText: '待处理'
                },
                {
                    title: '任务完成',
                    icon: 'fas fa-check-circle',
                    time: '预计 2025-07-09 15:00',
                    description: '提交巡查报告，完成任务',
                    status: 'pending',
                    statusText: '待处理'
                }
            ],
            issueTabs: [
                { name: '全部问题', count: 8, active: true },
                { name: '已整改', count: 5, active: false },
                { name: '整改中', count: 2, active: false },
                { name: '未整改', count: 1, active: false }
            ],
            issueSearchQuery: '',
            issues: [
                {
                    description: '高炉煤气管道法兰连接处存在泄漏',
                    location: '1号高炉煤气管道A区段',
                    type: '设备隐患',
                    severity: '严重',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-10',
                    status: '已整改',
                    statusType: 'completed'
                },
                {
                    description: '电气设备绝缘性能不达标',
                    location: '炼钢车间配电室',
                    type: '电气隐患',
                    severity: '严重',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-10',
                    status: '已整改',
                    statusType: 'completed'
                },
                {
                    description: '压力容器安全阀缺失',
                    location: '2号转炉区域',
                    type: '特种设备隐患',
                    severity: '严重',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-15',
                    status: '整改中',
                    statusType: 'inProgress'
                },
                {
                    description: '消防栓水压不足',
                    location: '轧钢车间西侧',
                    type: '消防隐患',
                    severity: '中等',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-12',
                    status: '已整改',
                    statusType: 'completed'
                },
                {
                    description: '安全通道堵塞',
                    location: '原料库房',
                    type: '通道隐患',
                    severity: '中等',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-08',
                    status: '已整改',
                    statusType: 'completed'
                },
                {
                    description: '危险化学品储存不规范',
                    location: '化验室',
                    type: '危化品隐患',
                    severity: '中等',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-10',
                    status: '整改中',
                    statusType: 'inProgress'
                },
                {
                    description: '安全警示标识不完善',
                    location: '全厂区',
                    type: '标识隐患',
                    severity: '轻微',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-15',
                    status: '已整改',
                    statusType: 'completed'
                },
                {
                    description: '员工安全培训不到位',
                    location: '全厂区',
                    type: '管理隐患',
                    severity: '中等',
                    foundDate: '2025-06-29',
                    deadline: '2025-07-20',
                    status: '未整改',
                    statusType: 'pending'
                }
            ],
            documents: [
                {
                    name: '湖北武钢有限责任公司上次巡查报告.pdf',
                    type: 'pdf',
                    size: '2.5 MB',
                    uploadTime: '2025-07-06',
                    uploader: '刘工'
                },
                {
                    name: '高炉煤气系统整改方案.docx',
                    type: 'word',
                    size: '1.8 MB',
                    uploadTime: '2025-07-07',
                    uploader: '王工'
                },
                {
                    name: '电气设备整改记录表.xlsx',
                    type: 'excel',
                    size: '1.2 MB',
                    uploadTime: '2025-07-07',
                    uploader: '赵工'
                },
                {
                    name: '特种设备检查清单.pdf',
                    type: 'pdf',
                    size: '3.1 MB',
                    uploadTime: '2025-07-08',
                    uploader: '张工'
                }
            ],
            mediaFiles: [
                {
                    name: '高炉煤气管道整改前.jpg',
                    type: 'image',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Industrial%20steel%20factory%20gas%20pipeline%20with%20visible%20leakage%20issue%20at%20flange%20connection%20point%2C%20showing%20corrosion%20and%20wear.%20The%20image%20shows%20a%20detailed%20close-up%20of%20an%20industrial%20high-pressure%20gas%20pipeline%20in%20a%20steel%20manufacturing%20facility&width=300&height=200&seq=1&orientation=landscape'
                },
                {
                    name: '高炉煤气管道整改后.jpg',
                    type: 'image',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Repaired%20industrial%20steel%20factory%20gas%20pipeline%20with%20new%20flange%20connection%20and%20proper%20sealing%2C%20showing%20clean%20and%20well-maintained%20pipes%20with%20fresh%20paint%20and%20proper%20labeling.%20The%20image%20shows%20a%20professional%20repair%20job%20in%20a%20steel%20manufacturing%20facility&width=300&height=200&seq=2&orientation=landscape'
                },
                {
                    name: '电气设备检查视频.mp4',
                    type: 'video',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Industrial%20electrical%20equipment%20inspection%20in%20steel%20factory%20control%20room%2C%20showing%20electrical%20panels%2C%20circuit%20breakers%20and%20testing%20equipment.%20The%20image%20shows%20a%20professional%20technician%20performing%20safety%20checks%20with%20measurement%20tools%20in%20a%20well-lit%20control%20room&width=300&height=200&seq=3&orientation=landscape'
                },
                {
                    name: '安全通道整改前.jpg',
                    type: 'image',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Blocked%20emergency%20exit%20corridor%20in%20industrial%20facility%20with%20stacked%20materials%2C%20boxes%20and%20equipment%20obstructing%20the%20pathway.%20The%20image%20shows%20a%20safety%20hazard%20in%20a%20steel%20manufacturing%20plant%20with%20poor%20lighting%20and%20warning%20signs%20partially%20visible&width=300&height=200&seq=4&orientation=landscape'
                },
                {
                    name: '安全通道整改后.jpg',
                    type: 'image',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Clear%20and%20properly%20marked%20emergency%20exit%20corridor%20in%20industrial%20facility%20with%20safety%20floor%20markings%2C%20adequate%20lighting%2C%20and%20visible%20exit%20signs.%20The%20image%20shows%20a%20well-maintained%20safety%20pathway%20in%20a%20steel%20manufacturing%20plant%20after%20remediation&width=300&height=200&seq=5&orientation=landscape'
                },
                {
                    name: '特种设备检查视频.mp4',
                    type: 'video',
                    thumbnail: 'https://readdy.ai/api/search-image?query=Industrial%20pressure%20vessel%20inspection%20in%20steel%20factory%2C%20showing%20safety%20valve%20testing%20and%20pressure%20gauge%20verification.%20The%20image%20shows%20a%20professional%20inspector%20examining%20specialized%20equipment%20with%20testing%20tools%20in%20a%20heavy%20industrial%20environment&width=300&height=200&seq=6&orientation=landscape'
                }
            ],
            // 编辑模式相关状态
            isEditMode: false,
            // 企业名称（从路由注入）
            companyName: '湖北武钢有限责任公司',
            companyCreditCode: '91420100MA4K29XN2B',
            companyAddress: '湖北省武汉市青山区厂前街290号',
            companyContact: '陈安全',
            editForm: {
                taskName: '湖北武钢安全隐患整改复查',
                taskType: '复查',
                responsible: '刘工',
                participants: '王工、赵工、张工',
                plannedStartTime: '2025-07-08 09:30',
                plannedEndTime: '2025-07-08 16:30',
                description: '针对湖北武钢有限责任公司上次巡查发现的安全隐患进行整改情况复查，重点关注高炉煤气系统、电气设备安全隐患及特种设备运行状况的整改落实情况。',
                status: '进行中'
            },
            originalForm: {}, // 保存原始数据用于取消编辑
            taskTypes: ['常规巡查', '复查', '专项检查', '应急检查'],
            taskStatuses: ['待执行', '进行中', '已完成', '已暂停'],
            availableUsers: ['刘工', '王工', '赵工', '张工', '李工', '陈工', '孙工'],
            // 历史巡查记录相关数据
            showHistoryModal: false,
            // 底部操作栏确认弹窗
            showContinueModal: false,
            showSubmitModal: false,
            // 添加问题弹窗相关数据
            showAddIssueModal: false,
            // 问题详情弹窗相关数据
            showIssueDetailModal: false,
            selectedIssue: null,
            detailModalMode: 'detail',
            // 整改弹窗相关数据
            showRectifyModal: false,
            rectifyingIssue: null,
            rectifyRemark: '',
            newIssue: {
                title: '',
                description: '',
                type: '',
                location: '',
                discoveryTime: '',
                severity: '',
                responsible: '',
                deadline: ''
            },
            historyRecords: [
                {
                    id: 'P2025-001',
                    date: '2025-06-15',
                    inspector: '刘工',
                    type: '常规巡查',
                    status: '已完成',
                    issuesFound: 3,
                    issuesResolved: 3,
                    summary: '发现3处安全隐患，已全部整改完成',
                    reportUrl: '#'
                },
                {
                    id: 'P2025-002',
                    date: '2025-05-20',
                    inspector: '王工',
                    type: '专项检查',
                    status: '已完成',
                    issuesFound: 5,
                    issuesResolved: 4,
                    summary: '发现5处问题，4处已整改，1处整改中',
                    reportUrl: '#'
                },
                {
                    id: 'P2025-003',
                    date: '2025-04-25',
                    inspector: '张工',
                    type: '常规巡查',
                    status: '已完成',
                    issuesFound: 2,
                    issuesResolved: 2,
                    summary: '发现2处轻微问题，已全部整改',
                    reportUrl: '#'
                },
                {
                    id: 'P2025-004',
                    date: '2025-03-30',
                    inspector: '赵工',
                    type: '复查',
                    status: '已完成',
                    issuesFound: 1,
                    issuesResolved: 1,
                    summary: '复查上次整改情况，确认整改到位',
                    reportUrl: '#'
                }
            ],
            // 巡查标准相关数据
            showStandardsModal: false,
            inspectionStandards: [
                {
                    category: '设备安全检查',
                    icon: 'fas fa-cogs',
                    items: [
                        {
                            title: '高炉煤气系统检查',
                            description: '检查煤气管道、阀门、法兰连接处是否有泄漏现象',
                            requirements: [
                                '目视检查管道外观，无明显腐蚀、变形',
                                '使用检漏仪检测法兰连接处，泄漏浓度<100ppm',
                                '检查安全阀、压力表工作状态正常',
                                '确认紧急切断装置功能完好'
                            ],
                            frequency: '每日检查',
                            standard: 'GB 6222-2005'
                        },
                        {
                            title: '电气设备安全检查',
                            description: '检查配电柜、电缆、接地系统安全状况',
                            requirements: [
                                '配电柜门锁完好，警示标识清晰',
                                '电缆无破损、老化现象',
                                '接地电阻值≤4Ω',
                                '绝缘电阻值≥0.5MΩ'
                            ],
                            frequency: '每周检查',
                            standard: 'GB 50054-2011'
                        }
                    ]
                },
                {
                    category: '环境安全检查',
                    icon: 'fas fa-leaf',
                    items: [
                        {
                            title: '作业环境检查',
                            description: '检查作业场所环境安全状况',
                            requirements: [
                                '通风系统运行正常，风速≥0.5m/s',
                                '照明充足，照度≥200lx',
                                '噪声水平≤85dB(A)',
                                '有害气体浓度符合职业卫生标准'
                            ],
                            frequency: '每日检查',
                            standard: 'GBZ 2.1-2019'
                        },
                        {
                            title: '消防安全检查',
                            description: '检查消防设施和安全通道状况',
                            requirements: [
                                '消防器材配置齐全，压力正常',
                                '安全出口标识清晰，通道畅通',
                                '消防水压≥0.35MPa',
                                '火灾报警系统功能正常'
                            ],
                            frequency: '每日检查',
                            standard: 'GB 50016-2014'
                        }
                    ]
                },
                {
                    category: '人员安全检查',
                    icon: 'fas fa-hard-hat',
                    items: [
                        {
                            title: '个人防护用品检查',
                            description: '检查作业人员防护用品佩戴情况',
                            requirements: [
                                '安全帽佩戴正确，无破损',
                                '防护服穿戴规范，材质符合要求',
                                '防护眼镜、手套配备齐全',
                                '呼吸防护器具功能正常'
                            ],
                            frequency: '每次作业前',
                            standard: 'GB 2811-2019'
                        },
                        {
                            title: '作业行为检查',
                            description: '检查作业人员操作规范性',
                            requirements: [
                                '严格按照操作规程执行',
                                '禁止违章作业和冒险作业',
                                '特种作业人员持证上岗',
                                '作业前进行安全确认'
                            ],
                            frequency: '作业过程中',
                            standard: 'AQ 2013-2008'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        filteredIssues() {
            const activeTab = this.issueTabs.find(tab => tab.active);
            let base = [];
            if (activeTab.name === '全部问题') {
                base = this.issues;
            } else if (activeTab.name === '已整改') {
                base = this.issues.filter(issue => issue.statusType === 'completed');
            } else if (activeTab.name === '整改中') {
                base = this.issues.filter(issue => issue.statusType === 'inProgress');
            } else {
                base = this.issues.filter(issue => issue.statusType === 'pending');
            }

            const q = (this.issueSearchQuery || '').trim().toLowerCase();
            if (!q) return base;
            const contains = (v) => (v ?? '').toString().toLowerCase().includes(q);
            return base.filter(issue =>
                contains(issue.description) ||
                contains(issue.location) ||
                contains(issue.type) ||
                contains(issue.severity) ||
                contains(issue.status) ||
                contains(issue.responsible) ||
                contains(issue.deadline) ||
                contains(issue.foundDate) ||
                contains(issue.discoveredDate)
            );
        },
        issueStats() {
            const total = this.issues.length;
            const completed = this.issues.filter(i => i.statusType === 'completed').length;
            const inProgress = this.issues.filter(i => i.statusType === 'inProgress').length;
            const pending = this.issues.filter(i => i.statusType === 'pending').length;

            const pct = (n) => total ? Math.round((n / total) * 100) : 0;

            return {
                total,
                totalPercent: total ? 100 : 0,
                completed,
                completedPercent: pct(completed),
                inProgress,
                inProgressPercent: pct(inProgress),
                pending,
                pendingPercent: pct(pending)
            };
        }
    },
    beforeUnmount() {
        // 组件销毁前清理事件监听器
        document.removeEventListener('keydown', this.handleKeyDown);
    },
    mounted() {
        // 初始化：从路由参数填充页面
        this.initializeFromRoute();
    },
    watch: {
        // 当通过路由再次打开不同任务详情时，动态刷新
        $route() {
            this.initializeFromRoute();
        }
    },
    methods: {
        // 根据路由参数初始化页面表单与展示
        initializeFromRoute() {
            const q = (this.$route && this.$route.query) ? this.$route.query : {};
            // 企业名称
            if (q.company) {
                this.companyName = q.company;
            }
            // 企业其他信息（信用代码/地址/联系人）
            if (q.creditCode) {
                this.companyCreditCode = q.creditCode;
            }
            if (q.address) {
                this.companyAddress = q.address;
            }
            if (q.contact) {
                this.companyContact = q.contact;
            }

            // 任务名称
            if (q.taskName) {
                this.editForm.taskName = q.taskName;
            }

            // 任务类型（兼容“专项巡查”→“专项检查”）
            if (q.type) {
                const typeMap = {
                    '专项巡查': '专项检查',
                    '常规巡查': '常规巡查',
                    '复查': '复查',
                    '应急检查': '应急检查'
                };
                const mappedType = typeMap[q.type] || q.type;
                if (!this.taskTypes.includes(mappedType)) {
                    this.taskTypes = [...this.taskTypes, mappedType];
                }
                this.editForm.taskType = mappedType;
            }

            // 负责人
            if (q.owner) {
                this.editForm.responsible = q.owner;
            }
            // 参与人员
            if (q.participants) {
                this.editForm.participants = q.participants;
            }

            // 计划时间（支持“开始 - 结束”或单一日期）
            if (q.scheduledDate) {
                const dateStr = String(q.scheduledDate);
                if (dateStr.includes(' - ')) {
                    const parts = dateStr.split(' - ');
                    this.editForm.plannedStartTime = parts[0].trim();
                    this.editForm.plannedEndTime = parts[1].trim();
                } else {
                    this.editForm.plannedStartTime = dateStr;
                }
            }
            // 明确的开始/结束时间字段
            if (q.plannedStartTime) {
                this.editForm.plannedStartTime = q.plannedStartTime;
            }
            if (q.plannedEndTime) {
                this.editForm.plannedEndTime = q.plannedEndTime;
            }
            // 任务描述
            if (q.description) {
                this.editForm.description = q.description;
            }

            // 状态（兼容 Patrol 的文案与类型）
            if (q.status || q.statusType) {
                const mappedStatus = this.mapStatus(q.status, q.statusType);
                if (!this.taskStatuses.includes(mappedStatus)) {
                    this.taskStatuses = [...this.taskStatuses, mappedStatus];
                }
                this.editForm.status = mappedStatus;
                this.syncProgressWithStatusType(q.statusType);
            }
        },

        // 将 Patrol 的状态文案 / 类型映射到 TaskDetails 的枚举
        mapStatus(statusText, statusType) {
            const byText = {
                '待处理': '待执行',
                '进行中': '进行中',
                '已完成': '已完成',
                '已取消': '已暂停'
            };
            if (statusText && byText[statusText]) return byText[statusText];
            const byType = {
                pending: '待执行',
                inProgress: '进行中',
                completed: '已完成',
                canceled: '已暂停'
            };
            if (statusType && byType[statusType]) return byType[statusType];
            return statusText || '待执行';
        },

        // 根据状态类型同步进度步骤（现场巡查/问题整理/编制报告/任务完成）
        syncProgressWithStatusType(statusType) {
            if (!statusType) return;
            const titles = ['现场巡查', '问题整理', '编制报告', '任务完成'];
            if (statusType === 'pending') {
                this.progressSteps.forEach(step => {
                    if (titles.includes(step.title)) {
                        step.status = 'pending';
                        step.statusText = '待处理';
                    }
                });
            } else if (statusType === 'inProgress') {
                const patrolStep = this.progressSteps.find(s => s.title === '现场巡查');
                if (patrolStep) {
                    patrolStep.status = 'inProgress';
                    patrolStep.statusText = '进行中';
                    if (!patrolStep.time || patrolStep.time.startsWith('预计')) {
                        patrolStep.time = new Date().toLocaleString();
                    }
                }
            } else if (statusType === 'completed') {
                this.progressSteps.forEach(step => {
                    if (titles.includes(step.title)) {
                        step.status = 'completed';
                        step.statusText = '已完成';
                        if (!step.time || step.time.startsWith('预计')) {
                            step.time = new Date().toLocaleString();
                        }
                    }
                });
            } else if (statusType === 'canceled') {
                // 无“取消”显示态，保持后续步骤为待处理即可
                this.progressSteps.forEach(step => {
                    if (titles.includes(step.title)) {
                        step.status = 'pending';
                        step.statusText = '待处理';
                    }
                });
            }
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        setActiveIssueTab(index) {
            this.issueTabs.forEach((tab, i) => {
                tab.active = i === index;
            });
        },
        getProgressStepClass(status) {
            if (status === 'completed') {
                return 'bg-green-100 text-green-600';
            } else if (status === 'inProgress') {
                return 'bg-blue-100 text-blue-600';
            } else {
                return 'bg-gray-100 text-gray-400';
            }
        },
        getProgressStatusClass(status) {
            if (status === 'completed') {
                return 'bg-green-100 text-green-800';
            } else if (status === 'inProgress') {
                return 'bg-blue-100 text-blue-800';
            } else {
                return 'bg-gray-100 text-gray-800';
            }
        },
        getSeverityClass(severity) {
            if (severity === '严重') {
                return 'bg-red-100 text-red-800';
            } else if (severity === '中等') {
                return 'bg-yellow-100 text-yellow-800';
            } else {
                return 'bg-blue-100 text-blue-800';
            }
        },
        getStatusClass(status) {
            if (status === '已整改') {
                return 'bg-green-100 text-green-800';
            } else if (status === '整改中') {
                return 'bg-yellow-100 text-yellow-800';
            } else {
                return 'bg-red-100 text-red-800';
            }
        },
        getFileIcon(type) {
            if (type === 'pdf') {
                return 'fas fa-file-pdf text-red-600';
            } else if (type === 'word') {
                return 'fas fa-file-word text-blue-600';
            } else if (type === 'excel') {
                return 'fas fa-file-excel text-green-600';
            } else {
                return 'fas fa-file text-gray-600';
            }
        },
        // 分享任务功能
        shareTask() {
            // 创建分享链接
            const shareUrl = window.location.href;
            const shareText = `巡查任务详情 - 湖北武钢安全隐患整改复查`;
            
            // 显示加载提示
            this.showToast('正在准备分享...', 'info');
            
            // 检查是否支持Web Share API
            if (navigator.share) {
                navigator.share({
                    title: shareText,
                    text: '查看巡查任务的详细信息和进度',
                    url: shareUrl
                }).then(() => {
                    this.showToast('分享成功！', 'success');
                }).catch((error) => {
                    this.fallbackShare(shareUrl, shareText);
                });
            } else {
                this.fallbackShare(shareUrl, shareText);
            }
        },
        // 备用分享方法
        fallbackShare(url, text) {
            // 复制链接到剪贴板
            if (navigator.clipboard) {
                navigator.clipboard.writeText(url).then(() => {
                    this.showToast('✅ 任务链接已复制到剪贴板，您可以分享给其他人', 'success');
                }).catch(() => {
                    this.showShareDialog(url, text);
                });
            } else {
                this.showShareDialog(url, text);
            }
        },
        // 显示分享对话框
        showShareDialog(url, text) {
            const shareDialog = confirm(`${text}\n\n链接: ${url}\n\n点击确定复制链接`);
            if (shareDialog) {
                // 创建临时输入框来复制文本
                const tempInput = document.createElement('input');
                tempInput.value = url;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                this.showToast('✅ 链接已复制到剪贴板', 'success');
            }
        },
        // 显示Toast提示
        showToast(message, type = 'info') {
            ElMessage({
                message: message,
                type: type,
                duration: 3000
            });
        },
        // 打印任务功能
        printTask() {
            // 隐藏不需要打印的元素
            const elementsToHide = [
                'header', // 顶部导航栏
                'aside',  // 左侧导航栏
                '.fixed.bottom-0', // 底部操作栏
                'button' // 所有按钮
            ];
            
            // 创建打印样式
            const printStyles = `
                <style>
                    @media print {
                        body * { visibility: hidden; }
                        .print-area, .print-area * { visibility: visible; }
                        .print-area { position: absolute; left: 0; top: 0; width: 100%; }
                        header, aside, .fixed, button { display: none !important; }
                        .container { margin: 0; padding: 20px; }
                        .bg-gray-50 { background: white !important; }
                        .shadow-sm { box-shadow: none !important; }
                        .text-blue-600 { color: #2563eb !important; }
                        .bg-blue-100 { background: #dbeafe !important; }
                        .bg-green-100 { background: #dcfce7 !important; }
                        .bg-yellow-100 { background: #fef3c7 !important; }
                        .bg-red-100 { background: #fee2e2 !important; }
                    }
                </style>
            `;
            
            // 添加打印样式到页面
            const styleElement = document.createElement('div');
            styleElement.innerHTML = printStyles;
            document.head.appendChild(styleElement);
            
            // 为主内容区域添加打印类
            const mainContent = document.querySelector('main');
            if (mainContent) {
                mainContent.classList.add('print-area');
            }
            
            // 执行打印
            window.print();
            
            // 打印完成后清理
            setTimeout(() => {
                document.head.removeChild(styleElement);
                if (mainContent) {
                    mainContent.classList.remove('print-area');
                }
            }, 1000);
        },
        // 导出报告功能
        exportReport() {
            // 显示导出选项
            const exportOptions = [
                'PDF格式报告',
                'Word格式报告', 
                'Excel数据表格',
                '图片格式报告'
            ];
            
            const selectedOption = prompt(
                '请选择导出格式:\n' + 
                exportOptions.map((option, index) => `${index + 1}. ${option}`).join('\n') +
                '\n\n请输入数字选择 (1-4):'
            );
            
            const optionIndex = parseInt(selectedOption) - 1;
            
            if (optionIndex >= 0 && optionIndex < exportOptions.length) {
                this.performExport(exportOptions[optionIndex]);
            } else if (selectedOption !== null) {
                ElMessage.error('请输入有效的选项数字 (1-4)');
            }
        },
        // 执行导出操作
        performExport(format) {
            // 模拟导出过程
            const taskData = {
                taskName: '湖北武钢安全隐患整改复查',
                taskNumber: 'XC-2025-0706-004',
                taskType: '复查',
                responsible: '刘工',
                participants: '王工、赵工、张工',
                createTime: '2025-07-06 08:30',
                plannedTime: '2025-07-08 09:30 - 2025-07-08 16:30',
                status: '进行中',
                company: '湖北武钢有限责任公司',
                issues: this.issues,
                progress: '40%'
            };
            
            // 显示导出进度
             ElMessage.succes(`正在导出${format}...`);
            
            // 模拟导出延迟
            setTimeout(() => {
                // 创建下载链接（实际项目中这里应该调用后端API）
                const dataStr = JSON.stringify(taskData, null, 2);
                const dataBlob = new Blob([dataStr], {type: 'application/json'});
                const url = URL.createObjectURL(dataBlob);
                
                const link = document.createElement('a');
                link.href = url;
                link.download = `巡查任务报告_${taskData.taskNumber}_${new Date().toISOString().split('T')[0]}.json`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                
                 ElMessage.succes(`${format}导出完成！`);
            }, 1500);
        },
        // 编辑任务功能
        editTask() {
            // 检查权限
            if (!this.checkEditPermission()) {
                this.showToast('您没有编辑此任务的权限，请联系任务负责人或管理员', 'error');
                return;
            }
            
            // 检查任务状态
            if (!this.checkTaskEditable()) {
                this.showToast('当前任务状态不允许编辑，只有"待执行"和"进行中"的任务可以编辑', 'error');
                return;
            }
            
            // 确认编辑操作
            const confirmEdit = confirm(
                '确定要编辑此任务吗？\n\n编辑任务可能会影响：\n' +
                '• 任务执行进度\n' +
                '• 参与人员安排\n' +
                '• 巡查计划时间\n\n' +
                '建议在编辑前与相关人员确认'
            );
            
            if (confirmEdit) {
                // 保存原始数据用于取消操作
                this.originalForm = JSON.parse(JSON.stringify(this.editForm));
                // 进入编辑模式
                this.isEditMode = true;
                this.showToast('已进入编辑模式', 'info');
            }
        },

        // 保存任务
        saveTask() {
            // 表单验证
            if (!this.validateForm()) {
                return;
            }

            this.showToast('正在保存任务...', 'info');

            // 模拟保存操作
            setTimeout(() => {
                try {
                    // 这里应该调用API保存数据
                    // await this.updateTaskAPI(this.editForm);
                    
                    // 退出编辑模式
                    this.isEditMode = false;
                    this.showToast('任务保存成功！', 'success');
                    
                    // 可以选择刷新页面数据
                    // this.loadTaskData();
                } catch (error) {
                    this.showToast('保存失败，请重试', 'error');
                }
            }, 1000);
        },

        // 取消编辑
        cancelEdit() {
            const confirmed = confirm('确定要取消编辑吗？未保存的更改将丢失。');
            
            if (confirmed) {
                // 恢复原始数据
                this.editForm = JSON.parse(JSON.stringify(this.originalForm));
                // 退出编辑模式
                this.isEditMode = false;
                this.showToast('已取消编辑', 'info');
            }
        },

        // 表单验证
        validateForm() {
            if (!this.editForm.taskName.trim()) {
                this.showToast('请输入任务名称', 'error');
                return false;
            }

            if (!this.editForm.taskType) {
                this.showToast('请选择任务类型', 'error');
                return false;
            }

            if (!this.editForm.responsible) {
                this.showToast('请选择负责人', 'error');
                return false;
            }

            if (!this.editForm.plannedStartTime) {
                this.showToast('请选择开始时间', 'error');
                return false;
            }

            if (!this.editForm.plannedEndTime) {
                this.showToast('请选择结束时间', 'error');
                return false;
            }

            if (new Date(this.editForm.plannedStartTime) >= new Date(this.editForm.plannedEndTime)) {
                this.showToast('结束时间必须晚于开始时间', 'error');
                return false;
            }

            if (!this.editForm.description.trim()) {
                this.showToast('请输入任务描述', 'error');
                return false;
            }

            return true;
        },
        // 检查编辑权限
        checkEditPermission() {
            // 模拟权限检查逻辑
            const currentUser = '管理员'; // 实际项目中从用户状态获取
            const taskResponsible = '刘工';
            const allowedRoles = ['管理员', '系统管理员'];
            
            return allowedRoles.includes(currentUser) || currentUser === taskResponsible;
        },
        // 检查任务是否可编辑
        checkTaskEditable() {
            const editableStatuses = ['待执行', '进行中'];
            const currentStatus = '进行中'; // 实际项目中从任务数据获取
            
            return editableStatuses.includes(currentStatus);
        },

        // 底部操作栏：保存
        handleBottomSave() {
            if (this.isEditMode) {
                this.saveTask();
            } else {
                this.showToast('当前非编辑模式，无需保存。如需修改请点击编辑。', 'info');
            }
        },

        // 底部操作栏：继续执行（打开确认弹窗）
        continueExecution() {
            this.showContinueModal = true;
        },
        // 确认继续执行
        confirmContinue() {
            this.showContinueModal = false;
            this.editForm.status = '进行中';
            const patrolStep = this.progressSteps.find(s => s.title === '现场巡查');
            if (patrolStep) {
                patrolStep.status = 'inProgress';
                patrolStep.statusText = '进行中';
                patrolStep.time = new Date().toLocaleString();
            }
            this.showToast('已继续执行，任务状态更新为“进行中”', 'success');
        },
        // 取消继续执行
        cancelContinue() {
            this.showContinueModal = false;
        },

        // 底部操作栏：提交巡查结果（打开确认弹窗）
        submitPatrolResults() {
            this.showSubmitModal = true;
        },
        // 确认提交巡查结果
        confirmSubmit() {
            this.showSubmitModal = false;
            this.editForm.status = '已完成';
            const nowText = new Date().toLocaleString();
            const titlesToComplete = ['现场巡查', '问题整理', '编制报告', '任务完成'];
            this.progressSteps.forEach(step => {
                if (titlesToComplete.includes(step.title)) {
                    step.status = 'completed';
                    step.statusText = '已完成';
                    step.time = nowText;
                }
            });
            this.showToast('巡查结果已提交，任务已完成', 'success');
            const updatedTaskId = (this.$route && this.$route.query && this.$route.query.taskId)
                ? this.$route.query.taskId
                : '';
            this.$router.push({
                path: '/patrol',
                query: {
                    updatedTaskId,
                    updatedStatus: '已完成',
                    updatedStatusType: 'completed'
                }
            });
        },
        // 取消提交巡查结果
        cancelSubmit() {
            this.showSubmitModal = false;
        },

        // 显示历史巡查记录
        showHistoryRecords() {
            this.showHistoryModal = true;
            this.showToast('正在加载历史巡查记录...', 'info');
            
            // 模拟加载历史记录数据
            setTimeout(() => {
                this.showToast('历史记录加载完成', 'success');
            }, 500);
        },

        // 关闭历史记录弹窗
        closeHistoryModal() {
            this.showHistoryModal = false;
        },

        // 显示巡查标准
        showInspectionStandards() {
            this.showStandardsModal = true;
            this.showToast('正在加载巡查标准...', 'info');
            
            // 添加键盘事件监听
            document.addEventListener('keydown', this.handleKeyDown);
            
            // 模拟加载巡查标准数据
            setTimeout(() => {
                this.showToast('巡查标准加载完成', 'success');
            }, 500);
        },

        // 关闭巡查标准弹窗
        closeStandardsModal() {
            this.showStandardsModal = false;
            // 移除键盘事件监听
            document.removeEventListener('keydown', this.handleKeyDown);
        },

        // 处理键盘事件
        handleKeyDown(event) {
            // ESC键关闭弹窗
            if (event.key === 'Escape' && this.showStandardsModal) {
                this.closeStandardsModal();
            }
        },

        // 查看标准详情
        viewStandardDetail(standard) {
            // 详细的标准信息数据库
            const standardInfo = {
                '《钢铁企业安全生产规程》(GB 17880-2011)': {
                    title: '钢铁企业安全生产规程',
                    code: 'GB 17880-2011',
                    description: '本标准规定了钢铁企业安全生产的基本要求，包括安全管理、设备安全、作业安全等方面的规定。',
                    scope: '适用于钢铁企业的安全生产管理',
                    publishDate: '2011-12-30',
                    effectiveDate: '2012-06-01',
                    chapters: [
                        {
                            title: '第一章 总则',
                            content: [
                                '1.1 为了加强钢铁企业安全生产管理，预防和减少生产安全事故，保障从业人员的生命安全和身体健康，制定本规程。',
                                '1.2 本规程适用于钢铁企业的安全生产管理。',
                                '1.3 钢铁企业必须遵守安全生产法律法规，建立健全安全生产责任制。'
                            ]
                        },
                        {
                            title: '第二章 安全管理',
                            content: [
                                '2.1 企业应建立安全生产管理机构，配备专职安全生产管理人员。',
                                '2.2 制定安全生产规章制度和操作规程，并严格执行。',
                                '2.3 定期开展安全检查，及时消除安全隐患。',
                                '2.4 建立安全生产档案，记录安全生产活动。'
                            ]
                        },
                        {
                            title: '第三章 设备安全',
                            content: [
                                '3.1 生产设备应符合国家安全技术标准。',
                                '3.2 定期对设备进行安全检查和维护保养。',
                                '3.3 特种设备应按规定进行检验检测。',
                                '3.4 设备故障应及时修复，不得带病运行。'
                            ]
                        }
                    ]
                },
                '《工贸企业有限空间作业安全规程》(AQ 3028-2008)': {
                    title: '工贸企业有限空间作业安全规程',
                    code: 'AQ 3028-2008',
                    description: '本规程规定了工贸企业有限空间作业的安全要求，包括作业前准备、作业过程控制、应急处置等。',
                    scope: '适用于工贸企业有限空间作业安全管理',
                    publishDate: '2008-09-27',
                    effectiveDate: '2009-02-01',
                    chapters: [
                        {
                            title: '第一章 基本要求',
                            content: [
                                '1.1 有限空间作业必须严格遵循"先通风、再检测、后作业"的原则。',
                                '1.2 作业前必须制定作业方案和应急预案。',
                                '1.3 作业人员必须经过专门培训，持证上岗。'
                            ]
                        },
                        {
                            title: '第二章 作业准备',
                            content: [
                                '2.1 作业前应对有限空间进行风险评估。',
                                '2.2 清理有限空间内的积存物质。',
                                '2.3 切断可能危及作业安全的电源、气源等。',
                                '2.4 设置安全警示标志。'
                            ]
                        },
                        {
                            title: '第三章 检测与通风',
                            content: [
                                '3.1 作业前必须对有限空间进行气体检测。',
                                '3.2 氧气浓度应保持在19.5%-23.5%之间。',
                                '3.3 可燃气体浓度不得超过爆炸下限的10%。',
                                '3.4 有毒气体浓度不得超过职业接触限值。'
                            ]
                        }
                    ]
                },
                '《高炉煤气安全规程》(GB 8978-2006)': {
                    title: '高炉煤气安全规程',
                    code: 'GB 8978-2006',
                    description: '本标准规定了高炉煤气系统的安全技术要求和管理规定。',
                    scope: '适用于高炉煤气的生产、输送、储存和使用',
                    publishDate: '2006-10-14',
                    effectiveDate: '2007-04-01',
                    chapters: [
                        {
                            title: '第一章 一般规定',
                            content: [
                                '1.1 高炉煤气系统应设置完善的安全保护装置。',
                                '1.2 煤气管道应定期检查，确保密封良好。',
                                '1.3 作业人员必须配备一氧化碳检测报警器。'
                            ]
                        },
                        {
                            title: '第二章 安全防护',
                            content: [
                                '2.1 煤气区域应设置醒目的安全警示标志。',
                                '2.2 禁止在煤气设施附近进行明火作业。',
                                '2.3 定期检测煤气浓度，防止泄漏。'
                            ]
                        }
                    ]
                }
            };

            const info = standardInfo[standard] || {
                title: standard,
                description: '该标准的详细信息正在完善中...',
                scope: '请联系管理员获取更多信息',
                chapters: []
            };

            // 构建详细内容HTML
            let chaptersHtml = '';
            if (info.chapters && info.chapters.length > 0) {
                chaptersHtml = '<div class="mt-4"><h5 class="font-semibold text-md mb-2 text-gray-700">主要内容：</h5>';
                info.chapters.forEach(chapter => {
                    chaptersHtml += `
                        <div class="mb-3 p-3 bg-gray-50 rounded-md">
                            <h6 class="font-medium text-sm text-blue-600 mb-2">${chapter.title}</h6>
                            <ul class="text-xs text-gray-600 space-y-1">
                                ${chapter.content.map(item => `<li class="flex items-start"><span class="mr-2">•</span><span>${item}</span></li>`).join('')}
                            </ul>
                        </div>
                    `;
                });
                chaptersHtml += '</div>';
            }

            ElMessageBox.alert(`
                <div class="text-left max-h-96 overflow-y-auto">
                    <h4 class="font-bold text-lg mb-3 text-blue-600">${info.title}</h4>
                    <div class="grid grid-cols-2 gap-4 mb-3 text-sm">
                        <p><strong>标准编号：</strong>${info.code || '待补充'}</p>
                        <p><strong>发布日期：</strong>${info.publishDate || '待补充'}</p>
                        <p><strong>实施日期：</strong>${info.effectiveDate || '待补充'}</p>
                        <p><strong>当前状态：</strong><span class="text-green-600">现行有效</span></p>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm"><strong>适用范围：</strong>${info.scope}</p>
                    </div>
                    <div class="mb-3">
                        <p class="text-sm"><strong>标准描述：</strong>${info.description}</p>
                    </div>
                    ${chaptersHtml}
                </div>
            `, '标准详情', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
                type: 'info',
                customClass: 'standard-detail-dialog'
            });
        },

        // 关闭添加问题弹窗
        closeAddIssueModal() {
            this.showAddIssueModal = false;
            this.resetNewIssueForm();
        },

        // 打开问题详情弹窗
        openIssueDetail(issue) {
            this.selectedIssue = issue;
            this.detailModalMode = 'detail';
            this.showIssueDetailModal = true;
        },

        // 打开查看问题弹窗（只读）
        openIssueView(issue) {
            this.selectedIssue = issue;
            this.detailModalMode = 'view';
            this.showIssueDetailModal = true;
        },

        // 关闭问题详情弹窗
        closeIssueDetailModal() {
            this.showIssueDetailModal = false;
            this.selectedIssue = null;
        },

        // 打开整改弹窗
        openRectifyModal(issue) {
            this.rectifyingIssue = issue;
            this.rectifyRemark = '';
            this.showRectifyModal = true;
        },

        // 关闭整改弹窗
        closeRectifyModal() {
            this.showRectifyModal = false;
            this.rectifyingIssue = null;
            this.rectifyRemark = '';
        },

        // 标记为整改中
        markIssueInProgress() {
            if (!this.rectifyingIssue) return;
            this.rectifyingIssue.status = '整改中';
            this.rectifyingIssue.statusType = 'inProgress';
            if (this.rectifyRemark) {
                this.rectifyingIssue.remark = this.rectifyRemark;
            }
            this.updateIssueTabCounts();
            ElMessage.success('已标记为整改中');
            this.closeRectifyModal();
        },

        // 标记为已整改
        markIssueCompleted() {
            if (!this.rectifyingIssue) return;
            this.rectifyingIssue.status = '已整改';
            this.rectifyingIssue.statusType = 'completed';
            if (this.rectifyRemark) {
                this.rectifyingIssue.remark = this.rectifyRemark;
            }
            this.updateIssueTabCounts();
            ElMessage.success('已标记为已整改');
            this.closeRectifyModal();
        },

        // 重置添加问题表单
        resetNewIssueForm() {
            this.newIssue = {
                title: '',
                description: '',
                type: '',
                location: '',
                discoveryTime: '',
                severity: '',
                responsible: '',
                deadline: ''
            };
        },

        // 提交添加问题
        submitAddIssue() {
            // 验证表单
            if (!this.newIssue.title || !this.newIssue.description || !this.newIssue.type || 
                !this.newIssue.location || !this.newIssue.discoveryTime || !this.newIssue.severity || 
                !this.newIssue.responsible || !this.newIssue.deadline) {
                ElMessage.error('请填写所有必填字段');
                return;
            }

            // 生成新问题ID
            const newId = 'I' + Date.now();
            
            // 创建新问题对象
            const newIssue = {
                id: newId,
                title: this.newIssue.title,
                description: this.newIssue.description,
                type: this.newIssue.type,
                location: this.newIssue.location,
                discoveryTime: this.newIssue.discoveryTime,
                severity: this.newIssue.severity,
                responsible: this.newIssue.responsible,
                deadline: this.newIssue.deadline,
                status: '待整改',
                statusType: 'pending',
                // 列表中使用的是 foundDate，这里同步设置
                foundDate: new Date(this.newIssue.discoveryTime).toISOString().split('T')[0],
                discoveredDate: new Date(this.newIssue.discoveryTime).toISOString().split('T')[0],
                discoveredBy: '当前用户' // 这里可以从用户状态中获取
            };

            // 添加到问题列表
            this.issues.push(newIssue);

            // 更新标签页计数
            this.updateIssueTabCounts();

            // 显示成功消息
            ElMessage.success('问题添加成功！');

            // 关闭弹窗
            this.closeAddIssueModal();
        },

        // 更新问题标签页计数
        updateIssueTabCounts() {
            this.issueTabs[0].count = this.issues.length; // 全部
            this.issueTabs[1].count = this.issues.filter(issue => issue.statusType === 'completed').length; // 已整改
            this.issueTabs[2].count = this.issues.filter(issue => issue.statusType === 'inProgress').length; // 整改中
            this.issueTabs[3].count = this.issues.filter(issue => issue.statusType === 'pending').length; // 未整改
        },

        // 上传附件按钮触发文件选择
        triggerAttachmentUpload() {
            const input = this.$refs.attachmentInput;
            if (input) input.click();
        },

        // 处理文件选择并加入列表
        handleAttachmentChange(event) {
            const files = Array.from(event.target.files || []);
            const uploadTime = new Date().toISOString().split('T')[0];
            const uploader = '当前用户';
            files.forEach(file => {
                const ext = (file.name.split('.')?.pop() || '').toLowerCase();
                const sizeLabel = this.formatFileSize(file.size);
                if (['pdf','doc','docx','xls','xlsx'].includes(ext)) {
                    const typeMap = { pdf: 'pdf', doc: 'word', docx: 'word', xls: 'excel', xlsx: 'excel' };
                    const type = typeMap[ext] || 'pdf';
                    this.documents.push({ name: file.name, type, size: sizeLabel, uploadTime, uploader });
                } else if (['jpg','jpeg','png'].includes(ext)) {
                    const url = URL.createObjectURL(file);
                    this.mediaFiles.push({ name: file.name, type: 'image', thumbnail: url });
                } else {
                    // 默认归为文档
                    this.documents.push({ name: file.name, type: 'pdf', size: sizeLabel, uploadTime, uploader });
                }
            });
            // 重置文件输入，便于重复选择同一文件
            event.target.value = '';
        },

        // 文件大小格式化
        formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const units = ['B','KB','MB','GB'];
            let i = 0; let val = bytes;
            while (val >= 1024 && i < units.length - 1) { val /= 1024; i++; }
            return `${val.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
        }

    }
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 弹框专用滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
    margin: 4px 0;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e0 0%, #a0aec0 100%);
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a0aec0 0%, #718096 100%);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #718096 0%, #4a5568 100%);
}

/* 弹框动画效果 */
.modal-enter-active, .modal-leave-active {
    transition: all 0.3s ease;
}

.modal-enter-from, .modal-leave-to {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
}

.modal-enter-to, .modal-leave-from {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 标准详情弹窗样式 */
.standard-detail-dialog {
    max-width: 800px !important;
}

.standard-detail-dialog .el-message-box__content {
    max-height: 600px;
    overflow-y: auto;
}

.standard-detail-dialog .el-message-box__message {
    padding: 0;
}

/* 标准详情内容样式 */
.standard-detail-dialog h4 {
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 8px;
}

.standard-detail-dialog h6 {
    position: relative;
    padding-left: 12px;
}

.standard-detail-dialog h6:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #3b82f6;
    border-radius: 2px;
}
</style>